<!--
 * @Description: 
 * @Author: shilinzhou
 * @Date: 2024-03-22 15:01:22
 * @LastEditors: shilinzhou
 * @LastEditTime: 2024-03-25 09:47:33
-->
<script setup lang="ts">
import QAsyncLoading from '@/components/q-async-loading/index.vue';

defineOptions({
    name: 'ArithmeticList'
});

const component = {
    // 未排产
    unScheduling: defineAsyncComponent({
        loader: () => import('./view/UnScheduling/indx.vue'),
        loadingComponent: QAsyncLoading
    }),
    // 已排产
    scheduled: defineAsyncComponent({
        loader: () => import('./view/Scheduled/index.vue'),
        loadingComponent: QAsyncLoading
    })
};

const activeName = ref<keyof typeof component>('unScheduling');
</script>

<template>
    <div class="f-1 f-column">
        <div class="work-view">
            <el-tabs v-model="activeName">
                <el-tab-pane label="未排产" name="unScheduling" />
                <el-tab-pane label="已排产" name="scheduled" />
            </el-tabs>
        </div>

        <component :is="component[activeName]"></component>
    </div>
</template>

<style scoped lang="scss">
@include b(m-page) {
    flex: 1;
    padding-top: 15px;

    :deep() {
        .order-number {
            display: flex;
            align-items: center;
        }
    }
}
@include b(work-view) {
    :deep() {
        .el-tabs__header {
            margin-bottom: 0;
        }
    }
}

@include b(arithmetic-page) {
    display: flex;
    flex-direction: column;
}
</style>
